// 新闻列表
<template>
  <div class="news">
    <h3>{{$store.state.newleftgoto.name}}</h3>
    <ul>
      <li v-for="(item,index) in newsList" :key="index" @click="jumpDetails(item)">
        <i></i>
        <span>{{ item.title }}</span>
        <bdi>{{ item.time.substr(0, 11) }}</bdi>
        <!--substr(start, end)  返回这个区间的字符串-->
      </li>
    </ul>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="10"
      :page-size="10"
      :current-page.sync="page"
      @current-change="currentChange($event)">
    </el-pagination>
  </div>
</template>
<script>
  export default {

    name: "webBulletin",
    data() {
      return {
        page: 1,       // 分页的初始化的数据
        newsList: [],  // 新闻列表的数据
      }
    },

    methods: {
      // 分页
      async currentChange(page) {
        this.getList(page)
      },
      // 获取列表数据
      async getList(page = this.page) {
        this.$store.commit('listLoading', true)
        if (JSON.stringify(this.$store.state.newleftgoto) == "{}") {
          this.$store.commit('newleftgoto', this.$store.state.firstNewNav)
        }
        let {id, name} = this.$store.state.newleftgoto
        let res = await this.$http({
          method: 'post',
          url: '/api/home/advisory_center/newslist',
          data: {
            pid: id,
            name,
            page
          }
        })
        if (res.data.State.Code == 200) {
          let temp = res.data.list
          this.newsList = temp.sort(this.sortTime('time'))
          this.$store.commit('listLoading', false)
        }
      },

      sortTime(op){
        return (a, b)=> {
          let x = Date.parse(a[op])
          let y = Date.parse(b[op])
          return y - x
        }
      },


      jumpDetails(item) {
        console.log(item)
        this.$store.commit('newDetails', item)
        this.$router.push({
          name: 'ConsultingDetails',
        })

      }

    },

    watch: {
      $route(to, from) {
        this.page = 1
        this.getList()
      }
    },

    mounted() {
      this.getList()
    }

  }
</script>
<style lang="scss" scoped>
  .news {
    width: 966px;

    .el-pagination {
      text-align: center;
      margin-top: 20px;
    }

    h3 {
      line-height: 46px;
      background: #f9f9f9;
      text-indent: 27px;
      border-left: #0a83e7 4px solid;
      letter-spacing: 2px;
    }

    ul {
      padding-top: 15px;
      min-height: 400px;

      li {
        width: 926px;
        margin: auto;
        border-bottom: 1px dashed #d0d0d0;
        display: flex;
        flex-direction: row;
        align-items: center;
        line-height: 44px;
        cursor: pointer;

        &:hover {
          background: rgba($color: #baddf5, $alpha: 0.1);
        }

        span {
          width: 800px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          letter-spacing: 0.8px;
        }

        i {
          width: 4px;
          height: 4px;
          background: #d1d1d1;
          margin-left: 10px;
          margin-right: 20px;
        }

        bdi {
          padding-right: 10px;
          width: 140px;
          color: #d0d0d0;
          font-size: 12px;
          text-align: right;
        }
      }
    }
  }
</style>

